<template>
	<section class="mycenter md100">
		<header class="hei100 wallfff rela own-h" v-if="$store.state.Type">
			<h1 class="flex_core  hei100 sz36 fontwt">
				我的
			</h1>
			<router-link to="/mycentreAll/setup" class="hued44 sz30 h_" style="color: #DF4444;">
				设置
			</router-link>
		</header>
		<nav class="own">
			<div class="own-s">
				<form enctype="multipart/form-data" class="rela">
					<img id="preview" class="headImg" :src="infos.Members_HeadPhoto" :onerror="errImg" />
					<input id="files" type="file" class="headImg abso opa0" @change="setImg" accept="image.png,image.jepg" />
				</form>
				<p class="mu30 md10 sz30">
					<span v-if="infos.Members_NikeName">{{infos.Members_NikeName}}</span>
					<router-link to="/mycentreAll/nickname" v-else class="hued44">去设置昵称</router-link>
				</p>
				<p class="md30">{{infos.Members_Phone}}</p>
			</div>
			<div class="own-b"></div>
		</nav>
		<ul class="wallfff">
			<li class="bbtm">
				<router-link to="/mycentreAll/mypoint" class="flex_middle plr30 hei100">
					<i class="iconfont icon-integral"></i>
					<p class="flex1 flex_between pl30 sz30">
						<span class="hue333">我的积分</span>
						<span>{{asset}}</span>
					</p>
					<i class="iconfont icon-advance"></i>
				</router-link>
			</li>
			<li class="bbtm">
				<router-link to="/mycentreAll/myoilcard" class="flex_middle plr30 hei100">
					<i class="iconfont icon-myrecharge"></i>
					<p class="flex1 flex_between pl30 sz30">
						<span class="hue333">我的油卡</span>
					</p>
					<i class="iconfont icon-advance"></i>
				</router-link>
			</li>
			<!--<li class="bbtm">
				<router-link to="#" class="flex_middle plr30 hei100">
					<i class="iconfont icon-mycard"></i>
					<p class="flex1 flex_between pl30 sz30">
						<span class="hue333">我的汽车</span>
					</p>
					<i class="iconfont icon-advance"></i>
				</router-link>
			</li>-->
		</ul>
		<ul class="wallfff mud20">
			<!--<li class="bbtm">
				<router-link to="#" class="flex_middle plr30 hei100">
					<i class="iconfont icon-order"></i>
					<p class="flex1 flex_between pl30 sz30">
						<span class="hue333">我的订单</span>
						<span>1</span>
					</p>
					<i class="iconfont icon-advance"></i>
				</router-link>
			</li>-->
			<li class="bbtm">
				<router-link to="/mycentreAll/myauto" class="flex_middle plr30 hei100">
					<i class="iconfont icon-carInsurance"></i>
					<p class="flex1 flex_between pl30 sz30">
						<span class="hue333">我的车险</span>
					</p>
					<i class="iconfont icon-advance"></i>
				</router-link>
			</li>
			<!--<li class="bbtm">
				<router-link to="#" class="flex_middle plr30 hei100">
					<i class="iconfont icon-roll"></i>
					<p class="flex1 flex_between pl30 sz30">
						<span class="hue333">我的团购</span>
					</p>
					<i class="iconfont icon-advance"></i>
				</router-link>
			</li>-->
			<li class="bbtm">
				<router-link to="/mycentreAll/mycode" class="flex_middle plr30 hei100">
					<i class="iconfont icon-QRcode"></i>
					<p class="flex1 flex_between pl30 sz30">
						<span class="hue333">二维码</span>

					</p>
					<i class="iconfont icon-advance"></i>
				</router-link>
			</li>
			<!--<li class="bbtm">
				<router-link to="#" class="flex_middle plr30 hei100">
					<i class="iconfont icon-share"></i>
					<p class="flex1 flex_between pl30 sz30">
						<span class="hue333">推广分享</span>
					</p>
					<i class="iconfont icon-advance"></i>
				</router-link>
			</li>-->
			<li class="bbtm">
				<router-link to="/mycentreAll/myextend" class="flex_middle plr30 hei100">
					<i class="iconfont icon-generalize"></i>
					<p class="flex1 flex_between pl30 sz30">
						<span class="hue333">我的推广</span>
					</p>
					<i class="iconfont icon-advance"></i>
				</router-link>
			</li>
		</ul>
		<footers></footers>
	</section>
</template>
<script type="text/javascript">
	import { Toast } from 'mint-ui';
	import { Indicator } from 'mint-ui';
	import Qs from 'qs';
	import footers from '../../components/Other/footers'
	export default {
		name: 'mycenter',
		components: {
			footers
		},
		data() {
			return {
				errImg: 'this.src= "' + require("../../assets/Other/500.png") + '"',
				infos: {},
				asset: "",
			}
		},
		created() {
			let v = this;
			// 获取会员信息
			if(!v.$store.state.MembersID) return false; // 检测首次访问
			if(!sessionStorage.infos) {
				v.$http.all([function() {
						return v.$http.get('/WorkMembers/V1.0/GetMembersByID', {
							params: {
								"MembersID": v.$store.state.MembersID
							}
						})
					}(), function() {
						return v.$http.get('/WorkMembersAsset/V1.0/GetMembersAsset', {
							params: {
								"MembersID": v.$store.state.MembersID
							}
						})
					}()])
					.then(v.$http.spread(function(res1, res2) {
						if(!res1.data.Return_ID) {
							sessionStorage.infos = JSON.stringify(res1.data.Return_Data); // 存储会员信息
							v.infos = JSON.parse(sessionStorage.infos);
						}
						if(!res2.data.Return_ID) {
							sessionStorage.asset = Number(res2.data.Return_Data.Asset_Points).toFixed(2); // 存储会员信息
							v.asset = sessionStorage.asset;
						}

					}))
			} else {
				v.infos = JSON.parse(sessionStorage.infos);
				v.asset = sessionStorage.asset;
			}
		},
		methods: {
			setImg: function(e) {
				let v = this;
				var ids = e.target.id;

				var pic = document.getElementById("preview"),
					file = document.getElementById(ids);
				var ext = file.value.substring(file.value.lastIndexOf(".") + 1).toLowerCase();

				// gif在IE浏览器暂时无法显示
				if(ext != 'png' && ext != 'jpg' && ext != 'jpeg') {
					Toast("图片的格式必须为png或者jpg或者jpeg格式！");
					return;
				}

				html5Reader(file);

				function html5Reader(file) {
					var file = file.files[0];
					var reader = new FileReader();
					reader.readAsDataURL(file);
					reader.onload = function() {
						var that = this;
						var formData = new FormData();
						formData.append("filename", "HeadImage")
						formData.append("names", file);
						Indicator.open({
							text: '上传头像，请稍等'
						});
						$.ajax({
							url: v.$store.state.urls + '/Common/v1.0/UploadImg',
							data: formData,
							type: 'POST',
							cache: false,
							processData: false,
							contentType: false,
							dataType: 'json',
							success: function(res) {

								if(!res.Return_ID) {

									v.$http.post("/WorkMembers/V1.0/MembersInfoEidt", Qs.stringify({

										"MembersID": v.$store.state.MembersID,
										"Mode": "HeadImg",
										"New_Contact": res.Return_Data

									})).then((res) => {
										Indicator.close();
										if(!res.data.Return_ID) {
											pic.src = that.result;
											//											let session = JSON.parse(sessionStorage.infos);
											//											session.Members_HeadPhoto = res.data.Return_Mess;
											//											sessionStorage.infos = JSON.stringify(session);

										} else {
											Toast(res.Return_Mess);
										}

									})

								} else {
									Toast(res.Return_Mess);
								}
							},
							error: function(err) {
								Indicator.close();
							}
						});
					}

				}
			}
		}

	}
</script>
<style scoped>
	.own {
		position: relative;
		height: 4.6666666666rem;
		overflow: hidden;
		background: #fff;
	}
	
	.own-h {
		z-index: 10;
	}
	
	.own-s {
		height: 10.4rem;
		width: 10.4rem;
		position: absolute;
		top: -6.4rem;
		left: -0.2rem;
		border-radius: 100%;
		background: #fff;
		z-index: 9;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		flex-direction: column;
	}
	
	.own-b {
		height: 15.3333333333rem;
		width: 15.3333333333rem;
		position: absolute;
		top: -10.9333333333rem;
		left: -2.6666666666rem;
		border-radius: 100%;
		background: #DF4444;
		z-index: 8;
		box-shadow: 0 0.0666666666rem 0.4rem #666;
	}
	
	.headImg {
		height: 1.6rem;
		width: 1.6rem;
		border-radius: 100%;
	}
	
	.icon-integral {
		font-size: 0.5333333333rem;
		color: #FBC04D;
	}
	
	.icon-myrecharge {
		font-size: 0.4rem;
		color: #F76C43;
	}
	
	.icon-mycard {
		font-size: 0.4rem;
		color: #755DF9;
	}
	
	.icon-order {
		font-size: 0.5333333333rem;
		color: #755DF9;
	}
	
	.icon-carInsurance {
		font-size: 0.5333333333rem;
		color: #22C896;
	}
	
	.icon-roll {
		font-size: 0.5333333333rem;
		color: #EE4653;
	}
	
	.icon-QRcode {
		font-size: 0.5333333333rem;
		color: #88CE14;
	}
	
	.icon-share {
		font-size: 0.5333333333rem;
		color: #E5A535;
	}
	
	.icon-generalize {
		font-size: 0.5333333333rem;
		color: #8E92FE;
	}
	
	.md100 {
		margin-bottom: 1.3333333333rem;
	}
	
	.abso {
		position: absolute;
		top: 0;
		left: 0;
	}
</style>